<template>
	<view class="cont_top">
		<up-navbar title="首页"
			leftIconSize="0rpx"
			bgColor="rgba(0,0,0,0)"
			titleStyle="color: #fff"
			:fixed="false"></up-navbar>

		<view class="swiper">
			<up-swiper :list="list1" height="560rpx" radius="0"></up-swiper>
		</view>

		<view class="information">
			<view>我的能源额度：</view>
			<view class="green" v-if="userinfo.user_id">{{userinfo.oli_nums}}</view>
			<view class="login" v-else
				@click="$path.navigateTo('/pages/login/login')"> 未登录（点击登录）</view>
		</view>
	</view>

	<view class="type-box">
		<view v-for="(item,index) in list"
			:key="index"
			:class="{'select': select == index}"
			@click="select = index">
			<view class="title">{{item.oli_title}}</view>
			<view class="money">
				<text>¥{{item.price}}</text>
				<view>
					<text>立省</text>
					<text>¥{{item.oli_nums_down}}</text>
				</view>
				<image src="/static/arrows.png" mode=""></image>
			</view>
		</view>
	</view>


	<!-- 我的 -->
	<view class="user-icon" @click="$path.navigateTo('/pages/user/user')">
		<up-icon name="account" color="#FFFFFF" size="28"></up-icon>
		<text>我的</text>
	</view>

	<up-popup :show="showPay" mode="center" :round="10" :safeAreaInsetBottom="false" @close="showPay = false">
		<view class="select-pay">
			<view class="s-p-tit">选择支付方式</view>
			<view class="s-p-radio" @click="throttle(submit(1))">
				<text>在线支付</text>
				<up-icon name="account" color="#FFFFFF" size="28"></up-icon>
			</view>
			<view class="s-p-radio" @click="throttle(submit(0))">
				<text>余额支付</text>
				<up-icon name="account" color="#FFFFFF" size="28"></up-icon>
			</view>
		</view>
	</up-popup>
	<payPassword ref='payRef' @submit="submitBalance" />

	<view class="btn" @click="typePat">立即购买</view>
</template>

<script setup>
	import { throttle } from '@/uni_modules/uview-plus';
	import { onShow } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';
	import { useCounterStore } from '@/stores/user'
	import { storeToRefs } from 'pinia'
	import api from '../../api/api';
	const user = useCounterStore()
	const { userinfo } = storeToRefs(user)

	const list1 = reactive(['/static/banner.png', '/static/banner.png']);

	const select = ref(-1)

	const list = reactive([])

	function olis() {
		api.home.olis().then(res => {
			Object.assign(list, res.data)
		})
	}

	const showPay = ref(false)
	const payRef = ref(null)

	function typePat() {
		if (!userinfo.value.user_id) return uni.$showMsg("未登录")
		if (select.value == -1) return uni.$showMsg("请选择要购买的能源")

		showPay.value = true
	}

	function submit(val) {
		console.log(val, 'val')
		showPay.value = false
		if (!val) {
			if (!userinfo.value.pay_pass) {
				uni.showModal({
					title: '提示',
					content: '未设置支付密码',
					confirmText: '去设置',
					success: function(res) {
						if (res.confirm) {
							api.navigateTo('/pages/information/setPay')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return
			}
			payRef.value.show = true
		} else {
			api.home.add_oli_order({
				pay_type: 1,
				oli_id: list[select.value].oli_id,
			}).then(res => {
				uni.requestPayment({
					"provider": "wxpay",
					timeStamp: res.data.timestamp,
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: 'MD5',
					paySign: res.data.paySign,
					success(res) {
						if (res.errMsg == 'requestPayment:ok') {
							uni.$showMsg('支付成功!', 'success')
							user.setInfo()
						}
					},
					fail(e) {
						if (e.errMsg == "requestPayment:fail cancel") {
							uni.$showMsg('取消支付!')
						} else {
							uni.$showMsg('支付失败!')
						}
					}
				})
			})
		}
	}

	function submitBalance(arr) {
		uni.$showMsg('支付中', 'loading', 10000)
		if (arr.length != 6) return uni.$showMsg('密码位数不对')
		api.home.add_oli_order({
			oli_id: list[select.value].oli_id,
			pay_type: 2,
			pay_pass: arr.join('')
		}).then(res => {
			uni.$showMsg('支付成功!', 'success')
			payRef.value.show = false
			payRef.value.keyIndex.length = 0
			user.setInfo()
		})
	}

	onShow(() => {
		olis()

		if (userinfo.value.user_id) user.setInfo()
	})
</script>

<style lang="scss">
	.cont_top {
		width: 750rpx;
		height: 560rpx;
		position: relative;

		.swiper {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
		}

		.information {
			width: 686rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 12rpx 12rpx 0 0;
			position: absolute;
			bottom: 0;
			left: 32rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			// box-shadow: 0 0 15rpx #e7e7e7;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;

			.green {
				font-weight: 600;
				font-size: 28rpx;
				color: #2BC700;
				margin-left: 20rpx;
			}

			.login {
				font-weight: 600;
				font-size: 28rpx;
				color: #020202;
				margin-left: 20rpx;
			}
		}
	}

	.type-box {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		padding: 20rpx 32rpx;

		>view {
			width: 622rpx;
			height: 140rpx;
			border: 4rpx solid #666666;
			border-radius: 12rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			margin-bottom: 32rpx;

			.title {
				width: 300rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.money {
				display: flex;
				align-items: center;
				position: relative;
				font-weight: 600;
				font-size: 32rpx;
				color: #EE0000;

				>view:nth-of-type(1) {
					font-weight: 600;
					font-size: 16rpx;
					color: #FFFFFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: absolute;
					right: 25rpx;
					top: 32rpx;
					z-index: 9;

					>text:nth-child(2) {
						color: #ffffff;
						font-size: 12rpx;
						font-weight: 600;
						margin-top: 8rpx;
					}
				}

				image {
					width: 85rpx;
					height: 109rpx;
					margin-left: 20rpx;
				}
			}
		}

		.select {
			border: 4rpx solid #F6941D;
		}
	}

	.user-icon {
		position: fixed;
		right: 32rpx;
		top: 75%;
		width: 132rpx;
		height: 132rpx;
		background: #F6941D;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		z-index: 999;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F6941D;
		border-radius: 12rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		bottom: 50rpx;
		left: 32rpx;
	}

	.select-pay {
		width: 686rpx;
		height: 336rpx;
		box-shadow: 0 4rpx 8rpx 0 #0000001a;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;

		.s-p-tit {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.s-p-radio {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>